<template>
    <div class="customer-profile">
      <h2>客户档案</h2>
      <!-- 基本信息部分 -->
      <el-card class="info-card">
        <h3>基本信息</h3>
        <el-form ref="basicForm" :model="basicFormData" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户名称">
                <el-input v-model="basicFormData.customerName" placeholder="请输入客户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户编号">
                <el-input v-model="basicFormData.customerCode" placeholder="系统自动生成" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户类别">
                <el-select v-model="basicFormData.customerType" placeholder="请选择客户类别">
                  <el-option label="汽车制造商" value="汽车制造商" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="所在省份">
                <el-select v-model="basicFormData.province" placeholder="请选择所在省份">
                  <el-option label="未知" value="未知" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所在市区">
                <el-select v-model="basicFormData.city" placeholder="请选择所在市区">
                  <el-option label="未知" value="未知" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="来源途径">
                <el-select v-model="basicFormData.source" placeholder="请选择来源途径">
                  <el-option label="现有客户" value="现有客户" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="客户价值">
                <el-select v-model="basicFormData.valueLevel" placeholder="请选择客户价值">
                  <el-option label="很高" value="很高" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="信用等级">
                <el-select v-model="basicFormData.creditLevel" placeholder="请选择信用等级">
                  <el-option label="高" value="高" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业">
                <el-select v-model="basicFormData.industry" placeholder="请选择所属行业">
                  <el-option label="零售" value="零售" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="公司简介">
                <el-input type="textarea" v-model="basicFormData.companyIntroduction" placeholder="请输入公司简介" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
      <!-- 主要联系人信息部分 -->
      <el-card class="info-card">
        <h3>主要联系人信息</h3>
        <el-form ref="contactForm" :model="contactFormData" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="联系人姓名">
                <el-input v-model="contactFormData.contactName" placeholder="请输入联系人姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="性别">
                <el-radio-group v-model="contactFormData.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部门">
                <el-input v-model="contactFormData.department" placeholder="请输入部门" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="生日">
                <el-date-picker v-model="contactFormData.birthday" type="date" placeholder="请选择生日" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="职务">
                <el-input v-model="contactFormData.position" placeholder="请输入职务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机">
                <el-input v-model="contactFormData.phone" placeholder="请输入手机" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="办公电话">
                <el-input v-model="contactFormData.officePhone" placeholder="请输入办公电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="QQ">
                <el-input v-model="contactFormData.qq" placeholder="请输入QQ" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="微信">
                <el-input v-model="contactFormData.wechat" placeholder="请输入微信" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电子邮箱">
                <el-input v-model="contactFormData.email" placeholder="请输入电子邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
      <!-- 财务信息部分 -->
      <el-card class="info-card">
        <h3>财务信息</h3>
        <el-form ref="financeForm" :model="financeFormData" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="账户名称">
                <el-input v-model="financeFormData.accountName" placeholder="请输入账户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纳税人识别号">
                <el-input v-model="financeFormData.taxpayerId" placeholder="请输入纳税人识别号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地址">
                <el-input v-model="financeFormData.address" placeholder="请输入地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开户银行">
                <el-input v-model="financeFormData.bank" placeholder="请输入开户银行" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行账号">
                <el-input v-model="financeFormData.accountNumber" placeholder="请输入银行账号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话">
                <el-input v-model="financeFormData.phoneNumber" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
      <!-- 业务信息部分 -->
      <el-card class="info-card">
        <h3>业务信息</h3>
        <el-form ref="businessForm" :model="businessFormData" label-width="120px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="合作现状">
                <el-input type="textarea" v-model="businessFormData.cooperationStatus" placeholder="请输入合作现状" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="合作前景">
                <el-input type="textarea" v-model="businessFormData.cooperationProspect" placeholder="请输入合作前景" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="跟进策略">
                <el-input type="textarea" v-model="businessFormData.followUpStrategy" placeholder="请输入跟进策略" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
  
      <!-- 附件上传部分 -->
      <el-card class="info-card">
        <h3>附件</h3>
        <el-upload
          class="upload-demo"
          action="#"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          multiple
        >
          <el-button size="small" type="primary">批量上传</el-button>
        </el-upload>
        <el-table :data="fileList" style="width: 100%; margin-top: 10px">
          <el-table-column prop="name" label="文件名称" />
          <el-table-column prop="size" label="文件大小" />
          <el-table-column label="上传人">
            <template #default="scope">
              <!-- 这里假设没有实际上传人数据，先留空 -->
            </template>
          </el-table-column>
          <el-table-column label="上传时间">
            <template #default="scope">
              <!-- 这里假设没有实际上传时间数据，先留空 -->
            </template>
          </el-table-column>
        </el-table>
      </el-card>
  
      <!-- 领用信息部分 -->
      <el-card class="info-card">
        <h3>领用信息</h3>
        <el-row>
          <el-col :span="8">
            <el-form-item label="领用人员">
              <el-input v-model="useFormData.usePerson" placeholder="请输入领用人员" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="领用时间">
              <el-date-picker v-model="useFormData.useTime" type="datetime" placeholder="请选择领用时间" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="跟进日期">
              <el-date-picker v-model="useFormData.followUpDate" type="date" placeholder="请选择跟进日期" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
  
      <!-- 顶部功能按钮部分 -->
      <div class="button-group">
        <el-button type="primary">保存且新增</el-button>
        <el-button type="primary">数据保存</el-button>
        <el-button>草稿箱</el-button>
        <el-button>导入</el-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  // 基本信息表单数据
  const basicFormData = ref({
    customerName: '',
    customerCode: '',
    customerType: '',
    province: '',
    city: '',
    source: '',
    valueLevel: '',
    creditLevel: '',
    industry: '',
    companyIntroduction: ''
  });
  
  // 主要联系人信息表单数据
  const contactFormData = ref({
    contactName: '',
    gender: '',
    department: '',
    birthday: '',
    position: '',
    phone: '',
    officePhone: '',
    qq: '',
    wechat: '',
    email: ''
  });
  
  // 财务信息表单数据
  const financeFormData = ref({
    accountName: '',
    taxpayerId: '',
    address: '',
    bank: '',
    accountNumber: '',
    phoneNumber: ''
  });
  
  // 业务信息表单数据
  const businessFormData = ref({
    cooperationStatus: '',
    cooperationProspect: '',
    followUpStrategy: ''
  });
  
  // 领用信息表单数据
  const useFormData = ref({
    usePerson: '',
    useTime: '',
    followUpDate: ''
  });
  
  // 附件文件列表
  const fileList = ref([]);
  
  const handlePreview = (file) => {
    console.log('预览文件', file);
  };
  
  const handleRemove = (file) => {
    console.log('移除文件', file);
    fileList.value = fileList.value.filter(f => f!== file);
  };
  </script>
  
  <style scoped>
  .customer-profile {
    padding: 20px;
  }
  
  .info-card {
    margin-bottom: 20px;
  }
  
  .button-group {
    margin-top: 20px;
  }
  </style>